﻿@inherits TscComponentBase

<div style="height:48px;" class="d-flex tab draggable @(IsEdit?"edit":"")">
    <MTabs @ref=_tabs Color="primary" @bind-Value="CurrentTab">
        @foreach (var tabItem in Panel.ChildPanels)
        {
            <MTab @key="tabItem.Id" Value="tabItem.Id.ToString()">
                @if (IsEdit && Panel.CurrentTabItem == tabItem)
                {
                    <MTextField Dense HideDetails="@("auto")" Autofocus Style="width:60px;" Value="tabItem.Title" ValueChanged="(string val)=>TitleValueChanged(tabItem,val)" />
                }
                else
                {
                    <span class="regular2--text btn">@tabItem.Title</span>
                }
                @if (IsEdit)
                {
                    <SButton Icon Color="regular3" Class="ml-3">
                        <SIcon Tooltip="@I18n.Dashboard("Close Tab Item")" Size="24" OnClickStopPropagation OnClick="() => CloseTabItem(tabItem)">mdi-close-circle</SIcon>
                    </SButton>
                }
            </MTab>
        }
        @if (IsEdit)
        {
            <SButton Icon Color="regular3" Class="ml-3 my-auto" OnClick="AddTabItem">
                <SIcon Tooltip="@I18n.Dashboard("Add Tab Item")" Size="24" OnClickStopPropagation>mdi-plus-circle-outline</SIcon>
            </SButton>
        }
    </MTabs>
    <MSpacer />
    @if (IsEdit)
    {
        @HeaderRightContent
    }
</div>
<div style="padding-left:10px;padding-bottom:10px;height:calc(100% - 48px);" class="overflow-y">
    <MTabsItems Value="CurrentTab">
        @foreach (var tabItem in Panel.ChildPanels)
        {
            <MTabItem Value="tabItem.Id.ToString()">
                <PanelGrids ParentPanel=tabItem Panels="tabItem.ChildPanels" />
            </MTabItem>
        }
    </MTabsItems>
</div>
